<include file="public@header" />
<style type="text/css">
	p {
		padding: 0;
		margin: 0;
		font-size: 16px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.row {
		margin: 0;
	}
	.box {
		margin: 20px 0;
	}
	.col {
		padding: 0;
	}
	.inner {
		margin-bottom: 20px;
	}
	input {
		width: 100%;
		border: 1px solid rgb(169,169,169);
		outline: none;
		text-indent: .5em;
	}
	select {
		width: 32.6%;
		font-size: 16px;
	}
	input[readonly='readonly'] {
		outline: none;
		border: 1px solid rgb(169,169,169);
		background: rgb(235, 235, 228);
		cursor: default;
	}
</style>
</head>
<body>
	<div class="wrap js-check-wrap">
		<ul class="nav nav-tabs">
			<li><a href="{:url('user/adminIndex/index')}">本站用户</a></li>
			<li class="active"><a href="">用户详情</a></li>
		</ul>
		<div class="row box">
			<div class="left col-xs-5 col">
				<div class="row inner">
					<p class="col-xs-3 col">UID:</p>
					<div class="col-xs-9 col">
						<input type="text" readonly="readonly" value="{$user_details.id}" name="uid" />
					</div>
				</div>
				<div class="row inner">
					<p class="col-xs-3 col">手机号码:</p>
					<div class="col-xs-9 col row">
						<input type="text" name="phone" placeholder="请输入手机号码" value="{$user_details.phone}" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')"/>
					</div>
				</div>
				<div class="row inner">
					<p class="col-xs-3 col">地区:</p>
					<div data-toggle="distpicker" class="col-xs-9 col" style="white-space: nowrap;">
					  <select data-province="{$user_details.province}" name="province"></select>
					  <select data-city="{$user_details.city}" name="city"></select>
					  <select data-district="{$user_details.area}" name="area"></select>
					</div>
				</div>
				<div class="row inner">
					<p class="col-xs-3 col">姓名:</p>
					<div class="col-xs-9 col">
						<input type="text" name="name" placeholder="请输入姓名" value="{$user_details.name}"/>
					</div>
				</div>
				<div class="row inner">
					<p class="col-xs-3 col">身份证:</p>
					<div class="col-xs-9 col">
						<input type="text" name="id_card" maxlength="18" placeholder="请输入身份证" value="{$user_details.id_card}"/>
					</div>
				</div>
				<div class="row inner">
					<p class="col-xs-3 col">法律报告:</p>
					<div class="col-xs-9 col">
						<a href="" class="row">xxxxxxx</a>
					</div>
				</div>
				<div class="row inner">
					<p class="col-xs-3 col">相关订单:</p>
					
						<div class="col-xs-9 col">	
							<foreach name="$user_details.order" item="v">
									<a class="row" href='{:url("admin/order/order_details",array("order_no"=>$v["order_no"]))}'>
										{$v.order_type}
									</a>
							</foreach>
						</div>
						
					
				</div>
				<div class="row inner">
					<p class="col-xs-3 col">档案编号:</p>
					<div class="col-xs-9 col">
						<foreach name="$user_details.file_number" item="v">
							{$v.file_number}
						</foreach>
					</div>
				</div>
				<div class="row inner">
					<p class="col-xs-3 col">备注:</p>
					<div class="col-xs-9 col">
						<input type="text" name="txt" placeholder="请填写备注" value="{$user_details.remarks}"/>
					</div>
				</div>
				<button type="button" name="change" class="btn btn-default btn-lg col-xs-5" onclick="changeUser()">修改</button>
				
			</div>
			<div class="right col-xs-offset-1 col-xs-6 col">
				<foreach name="record" item="vo">
					<div class="row inner">
						<p class="col-xs-3 col">{$vo.type_name} :</p>
						<div class="col-xs-9 col">
							<p>{$vo.content}</p>
						</div>
					</div>
				</foreach>
			</div>
		</div>
		
	</div>
	
</body>
<script src="__STATIC__/js/admin.js"></script>
<script type="text/javascript" src="__TMPL__/public/assets/js/layer/layer.js"></script>
<script src="__TMPL__/public/assets/js/distpicker.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// // 是否有订单
	$(function(){
		var order = {$user_details.order};
		if (order != '') {
			$('input').attr("readonly","readonly");
			$('select').attr("disabled","disabled");
			$("button[name='change']").attr("disabled","disabled");
		}
	})
	
	
	function changeUser() {
		var phone = $("input[name='phone']").val();

		var uid = $("input[name='uid']").val();

		var province = $("select[name='province']").val();
		var city = $("select[name='city']").val();
		var area = $("select[name='area']").val();
		
		var name = $("input[name='name']").val();
		var id_card = $("input[name='id_card']").val();
		
		var remarks = $("input[name='txt']").val();
		
		if (phone != "" && (/^1[3456789]\d{9}$/.test(phone))) {
			if (name == "" || (/^([\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}|[a-zA-Z][a-zA-Z\.\s]{1,19})$/.test(name))) {
				if (id_card == "" || (/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/.test(id_card))) {
					$.ajax("{:url('user/admin_index/user_edit')}",{
						data:{
							id:uid,
							phone:phone,
							province:province,
							city:city,
							area:area,
							remarks:remarks,
							name:name,
							id_card:id_card
						},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						success:function(data){
							if(data.code==1){
								layer.msg(data.msg,{icon:1,time:1500});
								setTimeout(function () {
									location.reload();
								}, 1800);
							}else{
								layer.msg(data.msg,{icon:2,time:1500});
							}
						},
						error:function(data){
							layer.msg('发生未知错误，请刷新页面后重试！',{time:1600});
							setTimeout(function(){
								location.reload();
							},1800)
						}
					});
					
					
				} else {
					layer.msg('请检查身份证格式!',{time:1600});
					warning("input[name='id_card']");
				}
			} else {
				layer.msg('请检查您输入的姓名!',{time:1600});
				warning("input[name='name']");
			}	
		} else if (phone == "") {
			layer.msg('请输入手机号码!',{time:1600});
			warning("input[name='phone']");
		}
		else {
			layer.msg('请检查手机号码格式!',{time:1600});
			warning("input[name='phone']");
		}
		// console.log(phone,province,city,district,name,id_card,txt)
	}
	
	//表单错误
	function warning(name) {
		$(name).css("border","1px solid red");
		$(name).focus();
		//重置
		$(name).keydown(function(){
			$(this).css("border-color","rgb(169,169,169)");
		})
	}
	// setInterval(function(){
	// 	location.reload()	
	// },1000)
</script>
</html>